<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript">
  //<![CDATA[
  var customIcons = {
    event: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    you: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
  };
  
  var markers = [];
  var infoWindow;
  var idx = 0;
  var circle;

  function load() {
    var point = new google.maps.LatLng(
                      parseFloat(<?php echo $location->latitude; ?>),
                      parseFloat(<?php echo $location->longitude; ?>));
    var map = new google.maps.Map(document.getElementById("map"), {
      center: point,
      zoom: 11,
      mapTypeId: 'roadmap'
    });
    infoWindow = new google.maps.InfoWindow;
    
    google.maps.event.addListener(map, 'dragend', function() {
      clearEvents()
      searchEvents(map);
    });
    
    var icon = customIcons['you'] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      animation: google.maps.Animation.DROP,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, "You are here");
          
    circle = new google.maps.Circle({
      center: map.getCenter(),
      map: map,
      radius: <?php echo sfConfig::get('app_event_radius')?> * 1000,
      strokeColor: "#01a0df",
      fillColor: "#01a0df",
      fillOpacity: 0.13
    });
    searchEvents(map);
    
  }
  
  function clearEvents(){
    infoWindow.close();
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers.length = 0;
    idx = 0;
  }
  
  function searchEvents(map){
    circle.setCenter(map.getCenter());
		$('div.jspPane').html("");
    var url = "<?php echo url_for('nearevent/near')?>?lat="+map.getCenter().lat()+"&lng="+map.getCenter().lng();
		$.ajax({
			type: "GET",
			url: url,
			dataType: "xml",
			success: function(xml) {
				$(xml).find('marker').each(function(){
          var bounds = new google.maps.LatLngBounds();
					var id = $(this).attr('id');
					var name = $(this).attr('name');
					var description = $(this).attr('description');
					var address = $(this).attr('address');
					var zip_code = $(this).attr('zip_code');
					var username = $(this).attr('username');
					var user_id = $(this).attr('user_id');
					var complete_name = $(this).attr('complete_name');
          var point = new google.maps.LatLng(
              parseFloat($(this).attr('lat')),
              parseFloat($(this).attr('lng')));
					var distance = $(this).attr('distance');

          var mod = $('<div id= "mod_'+id+'" class="modulo"></div>');
          $('<div class="iconmodule events_ico"></div>').html('').appendTo(mod);
          $('<div class="scroll_events_tittle"></div>').html('Nombre del evento').appendTo(mod);
          $('<div class="scroll_events_description"></div>').html('Texto de evento (Margen de texto para no que haya problemas)').appendTo(mod);
          var gotoContainer = $('<div class="gotoContainer"></div>').html('');
          $('<a class="small black awesome go_to">Go to »</a>').html('Go to »').appendTo(gotoContainer);
          gotoContainer.appendTo(mod);
          $('div.jspPane').append(mod);
          var html = "<span class='scroll_events_tittle'>" + name + "</span> <br>" + description;
          var icon = customIcons['event'] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            animation: google.maps.Animation.DROP,
            icon: icon.icon,
            shadow: icon.shadow
          });
          markers[idx] = marker;
          idx++;
          bindInfoWindow(marker, map, html, 'mod_'+id);

				});
			}
		});

  }
  
  function bindInfoWindow(marker, map, html, el) {
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
    });

    $('#'+el).click(function(event){
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
    });
  }

  $(document).ready(function() {
    load();
  });
  //]]>
</script>
<div style="float:left; position:relative; z-index:998; width:339px; height:20px; right:-610px; top:92px;"></div>
<div style="float:left; position:relative; z-index:999; width:339px; height:20px; right:-271px; top:425px;"></div>  
<div id="busquedaciudad" style="float:left">
  <div id="botones" style="float:left"><img src="/images/botones.jpg" width="262" height="72" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="200,4,257,69" href="#">
      <area shape="rect" coords="135,4,192,69" href="#">
      <area shape="rect" coords="69,4,126,69" href="#">
      <area shape="rect" coords="5,4,62,69" href="#">
    </map>
  </div>
  <input type="text" name="concss" class="clase" style="float:left; left:130px;">
  <input type="image" src="/images/b_buscadorciudad.jpg" id="botonbusquedaciudad" height="25" width="25" border="0" alt="Buscar" style="float:left">
  <div id="searchbycity" style="float:left"><img src="/images/searchbycity.jpg" width="142" height="18"></div>
</div>
<div id="contenedorcontent">
  <div id="mapa" style="left:16px;"><div id="map" style="width: 584px; height: 353px"></div></div>

  <div id="espaciadohorizontal" style="float:left"></div>
  <div tabindex="0" style="float:left; position:relative; overflow: hidden; padding: 0px; width: 339px;" class="scroll-pane jspScrollable">
    <div style="width: 339px; height-min: 353px; height:600px;" class="jspContainer">
      <div style="padding: 0px; width: 339px; top: 0px;" class="jspPane">

	    </div>
    </div>
  </div>
</div>
